<template>
  <div class="work-interview-container">

    <hurdle :showLine="0"></hurdle>

    <banner bannerText="面试预约" bannerEn="interview appointment"></banner>

    <div class="work-interview-box" v-if="showData == 1">

      <div class="work-interview-item" v-for="(interview,index) in interviewList" :key="index">

        <div class="work-interview-con" @click="openRecruit(interview.workId)">
          <img :src="interview.mechanismUrl?interview.mechanismUrl:require('../../../images/pic _bg.png')"
               class="interview-pic1"/>
          <div class="interview-company-box">

            <div class="company-con1">
              <span class="company-name">{{interview.mechanismName}}</span><span class="company-lend"
                                                                                 v-show="interview.lendType == 1">可借支</span>
            </div>

            <div class="company-con2">
              <span>{{interview.workName}}</span>
            </div>
            <div class="company-con3">
              招聘要求：<span v-if="interview.age" class="work-age">{{interview.age}}</span>
              <span>招{{interview.maxNumber}}人</span><span
              v-if="interview.recruitStatus != 1">/已报名{{interview.applyNumber}}人</span>
            </div>
            <div class="company-con4">
              <span v-if="interview.postType == 1">{{interview.workHourMoney}}元/时</span>
              <span v-if="interview.postType == 0">{{interview.wageRange}}元/月</span>
            </div>
          </div>

          <div class="interview-info-box">
            <span class="interview-line"></span>

            <div class="interview-info-con">
              <div class="interview-status-text">
                <span>状态：</span><span
                :class="{'status-text1':interview.status==0,'status-text2':(interview.status==1 || interview.status==5),'status-text3':(interview.status==2 || interview.status==3 || interview.status==4 || interview.status==6)}">{{interview.status | changeStatus}}</span>
              </div>

              <div v-if="interview.status==5 || interview.status==4 || interview.status==1 || interview.status==6">
                <div class="interview-fee-title"
                     v-if="interview.reMoney > 0 && interview.postType == 0 && interview.reTime > 0">
                  返费金额：<span class="fee-time">{{interview.reMoney}}元/月</span>
                </div>
                <div class="interview-fee-title"
                     v-if="interview.addWorkMoney > 0 && interview.postType == 1 && interview.reTime > 0">
                  奖励工价：<span class="fee-time">{{Math.floor(interview.addWorkMoney * 10) / 10}}元/时</span>
                </div>
                <div class="interview-fee-title"
                     v-if="interview.reMoney > 0 && interview.postType == 0 && interview.reTime > 0">
                  返费时间：<span>{{interview.reTime}}个月</span>
                </div>
                <div class="interview-fee-title"
                     v-if="interview.addWorkMoney > 0 && interview.postType == 1 && interview.reTime > 0">
                  奖励时间：<span>{{interview.reTime}}个月</span>
                </div>

                <div class="interview-time-address-box" v-if="interview.addWorkMoney <= 0 && interview.reTime <=0">
                  <span class="interview-time">面试时间：{{interview.interviewTime}}</span>
                  <span class="interview-address">面试地点：{{interview.recruitAddress}}</span>
                </div>
              </div>
              <div v-else class="interview-time-address-box">
                <span class="interview-time">面试时间：{{interview.interviewTime}}</span>
                <span class="interview-address">面试地点：{{interview.recruitAddress}}</span>
              </div>

              <div class="interview-teach-box" v-if="interview.teacherList.length">
                <span class="teach-name" v-for="(teach,j) in interview.teacherList" :key="j">驻场老师：{{teach.teacherName}}&nbsp;{{teach.teacherTel}}</span>
              </div>
            </div>

          </div>

        </div>

        <div class="work-interview-apply-box">
          <span class="apply-time">报名时间：{{interview.time | format}}</span>
          <div class="apply-use-time" v-if="interview.status == 0">
            <span>有效时间：</span><span class="surplus-time">{{interview.restTime}}</span>
          </div>
          <button class="waive-apply-text" type="button" @click="cancelApply(interview.workId)"
                  v-if="interview.status == 0">取消报名
          </button>
          <button class="waive-apply-text" type="button" @click="deleteInterview(interview.id)"
                  v-else-if="interview.status == 1">放弃入职
          </button>
          <button class="delete-apply-text" type="button" @click="deleteInterview(interview.id)"
                  v-else-if="interview.status == 2 || interview.status == 4||interview.status == 6">删除
          </button>
        </div>
      </div>

      <el-pagination background layout="prev, pager, next" :total="totalSize" :page-size="8" :hide-on-single-page="true"
                     prev-text='上一页' next-text='下一页' class="interview-page-box" @current-change="curPage"
                     v-if="showData == 1 && interviewList.length >0">
      </el-pagination>
    </div>

    <empty tipText="暂无面试预约~" v-if="showData == 2"></empty>

    <service></service>
    <back-top></back-top>
    <store-footer></store-footer>
  </div>
</template>

<script>
  import hurdle from "../../../components/hurdle"
  import banner from "../../../components/banner"
  import service from "../../../components/service"
  import storeFooter from "../../../components/storeFooter"
  import Empty from "../../../components/empty"
  import {formatDate, getSessionStore} from "../../../config/util";
  import {Loading} from 'element-ui';
  import {baseUrl} from "../../../config/env";
  import backTop from "../../../components/backTop";

  export default {
    inject: ['reload'],
    data() {
      return {
        userWand: "",
        page: 1,
        size: 8,
        showData: 0,
        userToken: "",
        totalSize: 0,
        interviewList: []
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      if (getSessionStore("userWand")) {
        this.userWand = base64.decode(getSessionStore("userWand"));
        this.userToken = getSessionStore("userToken");
      }
      this.queryWorkInterviewList();
    },
    methods: {
      queryWorkInterviewList() {
        this.axios.get(baseUrl + "/workapi/get_work_order_api?userToken=" + this.userToken + "&page=" + this.page + "&size=" + this.size).then((res) => {
          let retObj = res.data;
          if (retObj.code == 0) {
            this.totalSize = retObj.data.totalSize;//总页数
            if (retObj.data.list != null && retObj.data.list.length > 0) {//面试预约列表
              this.showData = 1;
              this.interviewList = retObj.data.list;
            } else {
              this.showData = 2;
            }
          } else {
            this.$message({message: retObj.msg, center: true, type: 'error', duration: 1000});
          }
        });
      },
      curPage(page) {
        this.page = page;
        this.queryWorkInterviewList();
      },
      cancelApply(workId) {//取消报名
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.axios.post(baseUrl + "/work/cancleApply?userToken=" + this.userToken + "&workId=" + workId).then((res) => {
          let resultObj = res.data;
          loading.close();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$message({message: "取消报名失败,请稍后重试!", center: true, type: 'error', duration: 1000});
            } else {
              this.reload();
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          loading.close();
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      deleteInterview(id) {//删除
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.axios.get(baseUrl + "/work/del_workorder?userToken=" + this.userToken + "&workOrderId=" + id + "&versionType=2.4").then((res) => {
          let resultObj = res.data;
          loading.close();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$message({message: "删除失败,请稍后重试!", center: true, type: 'error', duration: 1000});
            } else {
              this.reload();
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          loading.close();
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      openRecruit(workId) {
        window.open("/workDetail?workId=" + workId);
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      },
      changeStatus(type) {
        let temp = "";
        if (type == 0) {
          temp = "面试预约中";
        } else if (type == 1) {
          temp = "面试通过";
        } else if (type == 2) {
          temp = "面试失败";
        } else if (type == 3) {
          temp = "已招满";
        } else if (type == 4) {
          temp = "放弃入职";
        } else if (type == 5) {
          temp = "入职成功";
        } else if (type == 6) {
          temp = "已离职";
        }
        return temp;
      }
    },
    components: {
      Empty,
      hurdle,
      banner,
      service,
      storeFooter,
      backTop
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assets/mixin";

  .work-interview-container {
    position: relative;
    .wh(100%, auto);
    .work-interview-box {
      .wh(100%, auto);
      padding-top: 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .work-interview-item {
        display: flex;
        flex-direction: column;
        .wh(1200px, 192px);
        margin-bottom: 16px;
        border: 1px solid #EBEBEB;
        .work-interview-con {
          display: flex;
          align-items: center;
          .wh(100%, 147px);
          background: #FFF;
          position: relative;
          .interview-pic1 {
            margin-left: 18px;
            margin-right: 25px;
            .wh(152px, 112px);
            background: #F5F5F5;
          }
          .interview-company-box {
            display: flex;
            flex-direction: column;
            .company-con1 {
              display: flex;
              align-items: center;
              padding-bottom: 10px;
              .company-name {
                .size-color(18px, #333333);
              }
              .company-lend {
                .wh(60px, 20px);
                background: #3CAFFF;
                border-radius: 2px;
                .size-color(14px, #FFF);
                text-align: center;
                line-height: 20px;
                margin-left: 22px;
              }
            }
            .company-con2 {
              .size-color-weight(16px, #3CAFFF, 500);
            }
            .company-con3 {
              padding-top: 10px;
              padding-bottom: 15px;
              span {
                .size-color(14px, #4D4D4D);
              }
              .work-age {
                margin-right: 15px;
              }
            }
            .company-con4 {
              .size-color-weight(16px, #FF7C3C, 500);
            }
          }
          .interview-info-box {
            position: absolute;
            top: 0;
            right: 0;
            .wh(400px, 100%);
            display: flex;
            align-items: center;
            .interview-line {
              position: absolute;
              right: 400px;
              .wh(1px, 100px);
              background: #EBEBEB;
            }
            .interview-info-con {
              margin-left: 22px;
              display: flex;
              flex-direction: column;
              .size-color(14px, #47718F);
              .interview-status-text {
                padding-bottom: 12px;
                .status-text1 {
                  color: #FF7C3C;
                }
                .status-text2 {
                  color: #3CAFFF;
                }
                .status-text3 {
                  color: #FF5353;
                }
              }
              .interview-fee-title {
                padding-bottom: 12px;
                .fee-time {
                  color: #FF7C3C;
                }
              }
              .interview-time-address-box {
                display: flex;
                flex-direction: column;
                width: 375px;
                .interview-time {
                  padding-bottom: 12px;
                }
                .interview-address {
                  padding-bottom: 12px;
                }
              }
              .interview-teach-box {
                display: flex;
                flex-direction: column;
                .teach-name {
                  padding-bottom: 12px;
                  &:last-child {
                    padding-bottom: 0;
                  }
                }
              }
            }
          }
        }
        .work-interview-apply-box {
          .wh(100%, 48px);
          background: #F5F5F5;
          display: flex;
          align-items: center;
          .apply-time {
            padding-left: 18px;
            padding-right: 39px;
            .size-color(14px, #4D4D4D);
          }
          .apply-use-time {
            .size-color(14px, #4D4D4D);
            .surplus-time {
              .size-color(14px, #FF5353);
            }
          }
          .delete-apply-text {
            .wh(100px, 32px);
            border: 1px solid #808080;
            border-radius: 16px;
            background: #F5F5F5;
            line-height: 32px;
            margin-left: auto;
            margin-right: 20px;
            .size-color(16px, #808080);
            &:hover {
              background: #CCC;
              border: none;
            }
          }
          .waive-apply-text {
            .wh(100px, 32px);
            border: 1px solid #3CAFFF;
            border-radius: 16px;
            background: #F5F5F5;
            line-height: 32px;
            margin-left: auto;
            margin-right: 20px;
            .size-color(16px, #3CAFFF);
            &:hover {
              background: #3CAFFF;
              border: none;
              color: #FFF;
            }
          }
        }
      }
      .interview-page-box {
        margin: 0 auto 60px;
      }
      .interview-page-box /deep/ .btn-prev span {
        padding-left: 4px;
        padding-right: 4px;
      }
      .interview-page-box /deep/ .btn-next span {
        padding-left: 4px;
        padding-right: 4px;
      }
    }
  }
</style>
